<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/commissionReviewList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位">
            <el-select v-model="paging.position_id" placeholder="请选择">
              <el-option
                v-for="item in postionList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input v-model="paging.staff_name" type="text"></el-input>
          </el-form-item>

          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="申请日期">
            <el-date-picker
              v-model="date"
              @change="changeDate"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" min-width="150"> </el-table-column>
          <el-table-column label="门店" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="岗位" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.position.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="员工姓名" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.staff.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请查看日期" min-width="150">
            <template slot-scope="scope">
              <span
                >{{ scope.row.apply_start_time | parseTime("{y}-{m}-{d}") }} -
                {{ scope.row.apply_end_time | parseTime("{y}-{m}-{d}") }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="dateYear" label="申请日期" min-width="150"> </el-table-column>
          <el-table-column prop="dateMonth" label="申请时间" min-width="150"> </el-table-column>
          <el-table-column prop="username" label="状态" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.status | typeStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="操作"  min-width="150">
            <template slot-scope="scope">
              <span class="tab-table-text" @click="utils.goUrl(`/commissionReviewDetails?id=${scope.row.id}&title=查看提成审核`)">查看</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogFormVisible: false,
      paging: {
        page: 1,
        total: 0,
        limit: 10,
        store_id: "",
        position_id: "",
        start_time: "",
        end_time: "",
        staff_name: "",
      },
      date: "",
      tableData: [],
      storeList: [],
      postionList: [],
    };
  },
  filters: {
    typeStatus(val) {
      switch (val) {
        case 0:
          val = "待审核";
          break;
        case 1:
          val = "审核通过";
          break;
        case 2:
          val = "拒绝";
          break;
      }
      return val;
    },
  },
  created() {
    this.getAllStoreList();
    this.homegetPosition();
    this.getRoyaltyApply();
  },
  methods: {
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 获取全部岗位
    async homegetPosition() {
      let { code, data } = await this.$Http.homegetPosition();
      if (code) {
        this.postionList = data;
      }
    },
    async getRoyaltyApply() {
      let { code, data } = await this.$Http.getRoyaltyApply(this.paging);
      if (code) {
        data.data.forEach((ele) => {
          ele.create_time = ele.create_time.split(" ");
          ele.dateYear = ele.create_time[0];
          ele.dateMonth = ele.create_time[1];
          console.log(ele, "ele");
        });
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    changeDate(e) {
      this.paging.start_time = this.utils.time(e[0]);
      this.paging.end_time = this.utils.time(e[1]);
      console.log(this.paging);
    },
    async setRow(type, row) {
      this.utils.goUrl("/technicianSurfaceDetails?type=" + type);
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.getRoyaltyApply();
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.date = "";
      this.handleCurrentChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.price {
  ::v-deep {
    .el-input {
      width: 350px;
      margin-right: 20px;
    }
  }
}
</style>